<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height: 100px;padding: 20px;border: solid 30px black;margin: 40px;background: red;overflow: auto;position: absolute;left:50px;top:50px;}
    </style>
</head>
<body>
    <div class="box">360 前端静态资源库是由奇舞团支持并维护的开源项目免费 CDN 服务，支持 HTTPS 和 HTTP/2，囊括上千个前端资源库和 Google 字体库。360 前端静态资源库是由奇舞团支持并维护的开源项目免费 CDN 服务，支持 HTTPS 和 HTTP/2，囊括上千个前端资源库和 Google 字体库。360 前端静态资源库是由奇舞团支持并维护的开源项目免费 CDN 服务，支持 HTTPS 和 HTTP/2，囊括上千个前端资源库和 Google 字体库。360 前端静态资源库是由奇舞团支持并维护的开源项目免费 CDN 服务，支持 HTTPS 和 HTTP/2，囊括上千个前端资源库和 Google 字体库。360 前端静态资源库是由奇舞团支持并维护的开源项目免费 CDN 服务，支持 HTTPS 和 HTTP/2，囊括上千个前端资源库和 Google 字体库。</div>
</body>
<script src="./jquery.js"></script>
<script>

    // 获取
    console.log($(".box").width());         // cont
    console.log($(".box").innerWidth());    // cont + padding
    console.log($(".box").outerWidth());    // cont + padding + border

    document.onclick = function(){
        console.log($(".box").scrollTop()); // 滚走了的距离
    }

    console.log($(".box").offset());        // 相对于包含块的偏移的位置

    console.log($(".box").position());      // position

    // 设置
    // $(".box").width(200)         // cont
    // $(".box").innerWidth(200)    // -padding
    // $(".box").outerWidth(200)    // -padding - border

    // document.onclick = function(){
    //     $(".box").scrollTop(666) // 滚走了的距离
    // }

    // $(".box").offset({left:300,top:300})    // - margin


    
</script>
</html>